<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">

<head th:include="include :: header('修改分类')"></head>
<th:block th:include="include :: select2-css" />
<th:block th:include="include :: oly_tagsinput_css" />
<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content" th:object="${cmsCat}">
		<form class="form-horizontal m" id="form-cat-edit">
			<div class="form-group">
				<label class="col-sm-3 control-label is-required">上级类目：</label>
				<div class="col-sm-8">
					<div class="input-group">
						<input id="treeId" name="parentId" type="hidden" th:field="*{parentId}" />
						<input class="form-control" type="text" onclick="selectCatTree()" id="treeName" readonly
							th:value="${parentName}"> <span class="input-group-addon"><i
								class="fa fa-search"></i></span>
					</div>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label is-required">类目ID：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" name="catId" th:field="*{catId}" readonly>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label is-required">类目名称：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" name="catName" th:field="*{catName}" required minlength="2"
						maxlength="8">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label is-required">类目节点：</label>
				<div class="col-sm-8">
					<div class="radio-box" th:each="dict : ${@dictTag.getType('cms_cat_parent')}">
						<input type="radio" th:id="${dict.dictCode}" name="parent" th:value="${dict.dictValue}"
							th:field="*{parent}">
						<label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
					</div>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label is-required">类目类型：</label>
				<div class="col-sm-8">
					<select name="catType" class="form-control" th:with="type=${@dictTag.getType('cms_support_type')}">
						<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
							th:field="*{catType}">
						</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label is-required">类目排序：</label>
				<div class="col-sm-8">
					<input class="form-control" type="number" name="orderNum" th:field="*{orderNum}" required>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label is-required">类目状态：</label>
				<div class="col-sm-8">
					<div class="radio-box" th:each="dict : ${@dictTag.getType('cms_cat_visible')}">
						<input type="radio" th:id="${dict.dictCode}" name="visible" th:value="${dict.dictValue}"
							th:field="*{visible}">
						<label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
					</div>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">类目路径：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" name="catUrl" th:field="*{catUrl}" id="catUrl">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">类目图标：</label>
				<div class="col-sm-8">
					<input name="catIcon" class="form-control" th:field="*{catIcon}" type="text" placeholder="类目图标">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">备注：</label>
				<div class="col-sm-8">
					<textarea name="remark" class="form-control">[[*{remark}]]</textarea>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">关键词：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" placeholder="关键词" name="keywords" th:field="*{keywords}">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">描述：</label>
				<div class="col-sm-8">
					<textarea name="description" class="form-control">[[*{description}]]</textarea>
				</div>
			</div>
		</form>
	</div>
	<div th:include="include::footer"></div>
	<th:block th:include="include :: select2-js" />
	<th:block th:include="include :: oly_tagsinput_js" />
	<script th:inline="JavaScript">

		//关键词
		$("input[name='keywords']").tagsinput({
			maxTags: 4,
			maxChars: 8
		});
	
		var prefix = ctx + "cms/cat";
		$("#form-cat-edit").validate({
			rules: {
				parent: {
					required: true
				},
				orderNum: {
					digits: true
				},
				catType: {
					required: true
				},
				visible: {
					required: true
				},
				parentId: {
					digits: true
				},
				catUrl: {
					remote: {
						url: prefix + "/checkCatUnique",
						type: "post",
						dataType: "json",
						data: {
							"catUrl": function () {
								return $.common.trim($("input[name=catUrl]").val());
							},
							"catId": function () {
								return $.common.trim($("input[name=catId]").val());
							}
						},
						dataFilter: function (data, type) {
							return $.validate.unique(data);
						}
					}
				},
				catName: {
					required: true,
					rangelength: [2, 8],
					remote: {
						url: prefix + "/checkCatUnique",
						type: "post",
						dataType: "json",
						data: {
							"parentId": function () {
								return $("input[name='parentId']").val();
							},
							"catName": function () {
								return $.common.trim($("#catName").val());
							},
							"catId": $("input[name='catId']").val()
						},
						dataFilter: function (data, type) {
							return $.validate.unique(data);
						}
					}
				},
			},
			messages: {
				"catName": {
					remote: "类目已经存在"
				},
				"catUrl": {
					remote: "路径已经存在"
				}
			},
			focusCleanup: true
		});

		function submitHandler() {
			if ($.validate.form()) {
				$.operate.save(prefix + "/edit", $('#form-cat-edit').serialize());
			}
		}

		$(function () {
			$("input[name='parent']").on('ifChecked', function (event) { //ifCreated 事件应该在插件初始化之前绑定
				if ($("input[name='parent']:checked").val() == "1") {
					$.ajax({
						url: prefix + "/checkCatUnique",
						type: "post",
						dataType: "json",
						data: {
							"parentId": function () {
								return $("input[name='catId']").val();
							}
						},
						success: function (result) {
							if (!$.validate.unique(result)) {
								$.modal.msgError("存在子节点不允许修改");
								$("input[name='parent'][value='0']").iCheck('check');
							}

						}
					});
				}
			});

		});

		/*菜单类目-x-选择菜单树*/
		function selectCatTree() {
			var catId = $("#treeId").val();
			var url = prefix + "/selectCatTree?parent=0&catId=" + catId;
			var options = {
				title: '类目选择',
				width: "380",
				url: url,
				callBack: doSubmit
			};
			$.modal.openOptions(options);
		}

		function doSubmit(index, layero) {
			var body = $.modal.getChildFrame(index), treeId = body.find('#treeId').val();
			if (treeId == $("input[name='catId']").val()) {
				$.modal.msgError("不能选择自己为父节点")
			}
			else {
				$("#treeId").val(treeId);
				$("#treeName").val(body.find('#treeName').val());
				$.modal.close(index);
			}

		}
	</script>
</body>

</html>